<template>
	<view class="main">
		<view class="card">
			<!-- <view class="input-item flex align" @click="show = true">
				<view class="input-name">活动类型</view>
				<view>{{activity_type_name==''?'请选择':activity_type_name}}</view>
			</view> -->
			<view class="input-item flex align">
				<view class="input-name">活动主题</view>
				<input placeholder="输入活动主题" v-model="activity_title" />
			</view>
			<view class="input-item flex align">
				<view class="input-name">活动时间</view>
				<view class="example-body" style="width: 80%;">
					<uni-datetime-picker type="date" :end="endDateTime" :clear-icon="false" v-model="activity_time"
						@maskClick="maskClick" />
				</view>

			</view>
			<view class="input-item flex align">
				<view class="input-name">活动地点</view>
				<input placeholder="输入活动地点" v-model="activity_address" />
			</view>
			<view class="input-item">
				<view class="input-name" style="margin-bottom: 10rpx;">活动内容</view>
				<textarea placeholder="请输入活动内容" v-model="activity_content">
					</textarea>
			</view>


<!-- 			<view class="input-item">
				<view class="input-name" style="margin-bottom: 10rpx;">活动感想</view>
				<textarea placeholder="请输入活动感想" v-model="activity_thinking">
					</textarea>
			</view> -->
			<view style="margin-top: 20rpx;">
				<view class="flex align wrap">
					<view style="margin-right: 20rpx;position: relative;" v-for="(item,index) in activity_images"
						:key="index">
						<image :src="item.path" style="width: 150rpx;height: 150rpx;"></image>
						<view @click="toDel(index)" style="position: absolute;top: 0;right: 0;">
							<uni-icons type="clear" color="#aa0000" size="25"></uni-icons>
						</view>
					</view>
				</view>

				<view class="loadUp" @click="toUpload()">
					<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
				</view>
			</view>

			<!-- <view class="logo" @click="toUpload()" v-else>
				<image :src="logo"></image>
			</view> -->
			<view style="color: #8A8A8A;font-size: 24rpx;margin-top: 21rpx;">活动照片</view>
			<view class="resign-btn" @click="toSubmit()">提交</view>
		<!-- <navigator url="/pages/activity/activity" class="resign-btn" hover-class="none" style="background: #ff5200;">活动记录</navigator> -->
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="onConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		activityAdd,
		regionLists,
		companyInfo,
		activityType,
		activityDetail
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/utils/oss/oss.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				imageValue: [],
				logo: '',
				business_license: '',
				items: [],
				region: [],
				date: '',
				name: '',
				money: '',
				address: '',
				juridical_person: '',
				telphone: '',
				area: '',
				username: '',
				password: '',
				role_id: '',
				role_S: false,
				columns: [],
				show: false,
				activity_type: '',
				activity_type_name: '',
				activity_thinking: '',
				activity_images: [],
				activity_content: '',
				activity_address: '',
				activity_time: '',
				activity_title: '',
				endDateTime:new Date()
			};
		},
		onLoad(option) {
			// this.getType()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {

		},
		methods: {
			toDel(i) {
				this.activity_images.splice(i, 1);
			},
			async getType() {
				let result = await activityType({
					page: 1,
					size: 40
				});
				if (result.code == 1) {
					const obj = result.data
					const arr = []
					for (const key in obj) {
						if (obj.hasOwnProperty(key)) {
							arr.push({
								key: key,
								name: obj[key]
							});
						}
					}
					console.log(arr)
					// const arr = Object.values(obj);
					this.columns = [arr]
				}
			},
			async toSubmit(){
				let obj = {
					// activity_type:this.activity_type,
					activity_title:this.activity_title,
					activity_time:this.activity_time,
					activity_address:this.activity_address,
					activity_content:this.activity_content,
					activity_images:this.activity_images,
					// activity_thinking:this.activity_thinking,
				}
				const result = await activityAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			onConfirm(e) {
				this.activity_type = e.value[0].key
				this.activity_type_name = e.value[0].name
				this.show = false

			},
			toback() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/xieyi/register_info'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/xieyi/private_policy'
				});
			},
			// 初始化的时候调用参数，判断用户是否第一次进入
			judge() {
				uni.getStorage({
					key: 'agreement_key',
					success: () => {
						// 获取到了不显示弹窗
						this.$refs.alertDialog.close();
					},
					fail: () => {
						this.$refs.alertDialog.open()
					}
				})
			},
			// 同意按钮
			admit() {
				try {
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_Date', new Date().toLocaleString())
				} catch (e) {
					//TODO handle the exception
				}
				this.$refs.alertDialog.close();
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			async getRegion() {
				const result = await regionLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					item.children.forEach(item2 => {
						item2.text = item2.name
						item2.value = item2.id
						if (item2.children.length > 0) {
							item2.children.forEach(item3 => {
								item3.text = item3.name
								item3.value = item3.id
							})
						}
					})
				})
				this.items = result.data
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.region = arr
			},
			toUpload(i) {
				console.log(i)
				let that = this
				// uni.showLoading({
				// 	title: "loading",
				// 	mask: true
				// })
				let token = uni.getStorageSync('token')
				uni.chooseImage({
					// count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log(res)
						console.log(tempFilePaths)
						tempFilePaths.forEach(item => {
							console.log(item)
							uni.uploadFile({
								url: 'https://xsdy.ncscloudmedia.com/index.php/api/common/upload', // 你的上传图片的API接口
								filePath: item,
								header: {
									'token': token
								},
								name: 'file', // 这里根据API的要求来，可能需要指定文件对应的字段名
								success: function(uploadFileRes) {
									console.log(JSON.parse(uploadFileRes
										.data)); // 上传成功后的操作
									let datasStr = JSON.parse(uploadFileRes.data)
									that.activity_images.push({
										url: datasStr.data.path,
										path: datasStr.data.url,
									})
									console.log(that.activity_images)
								},
								fail: function(uploadFileErr) {
									console.log(uploadFileErr); // 上传失败后的操作
								}
							});
						})

					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			async checkToken() {
				const result = await checkToken2()
				if (result.code == 1) {

				} else {
					uni.navigateTo({
						url: '/pages/login/login?type=1'
					})
				}
			},
			deletes(e) {
				const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
				this.imageValue.splice(num, 1);
			},
			// 入驻
			async toResign() {
				let obj = {
					name: this.name,
					logo: this.logo,
					business_license: this.business_license,
					region: this.region,
					address: this.address,
					juridical_person: this.juridical_person,
					telphone: this.telphone,
					area: this.area,
					username: this.username,
					password: this.password,
				}
				if (obj.name == '') {
					uni.showToast({
						title: '请输入商户名称',
						icon: 'error'
					})
					return false
				}
				console.log(obj)
				const result = await storeAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getInfo() {
				const result = await companyInfo()
				if (result.code == 1) {
					this.role_id = result.data.role_id
					let arr = result.data.permission_list
					if (arr.length != 0) {
						arr.forEach(item => {
							if (item.permission_mark == 'storeManage') {
								this.role_S = true
							}
						})
					}

				} else {

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		/* line-height: 18px; */
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}

	.agreement-view {
		margin-top: 20px;
		box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
		border-radius: 20rpx;
		padding: 20rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		width: 300px;
		height: 200rpx;
		align-items: center;
		/* justify-content: center; */
		background-color: #fff;
	}

	.u-text-center {
		font-size: 15px;
		padding-bottom: 20rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 600;
		width: 100%;
		height: 30px;
		text-align: center;
	}

	.agreement-content {
		overflow-y: scroll;
		padding: 0rpx 40rpx 10rpx 40rpx;
	}

	.agreement-btns {
		width: 100%;
		/* height: 85rpx; */
		display: flex;
		flex-direction: row;
	}

	.yse-btn {
		color: #fff;
		background-color: red;
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 20rpx 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.no-btn {
		/* background-color: aquamarine; */
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 0 20rpx;
	}

	.text {
		line-height: 46px;
	}

	.main {
		margin: 24rpx;
		padding-bottom: 10rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 10rpx 24rpx 10rpx;
			background: white;
			margin-bottom: 20rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}



			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				.input-name {
					width: 30%;
				}

				input,
				textarea {
					font-size: 28rpx;
				}

				textarea {
					background: #EEEEEE;
					border-radius: 4rpx;
					padding: 18rpx 20rpx;
				}
			}
		}

		.resign-btn {
			background: #FF9008;
			border-radius: 32rpx;
			font-size: 26rpx;
			font-weight: bold;
			line-height: 72rpx;
			color: white;
			margin: 50rpx auto;
			text-align: center;
		}
	}

	.card-tit {
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx 0;

		text {
			background: #FF9008;
			display: block;
			width: 9rpx;
			height: 35rpx;
			margin-right: 10rpx;
			border-radius: 5rpx;
		}
	}

	.list {
		background: white;
		padding: 16rpx 24rpx;
		margin-bottom: 24rpx;

		.list-name {
			font-size: 24rpx;
			font-weight: bold;
		}

		.time {
			margin-top: 19rpx;
		}

		.status {
			background: #FFCF7D;
			width: 86rpx;
			line-height: 41rpx;
			border-radius: 4rpx;
			color: #E38F00;
			font-size: 18rpx;
			text-align: center;
		}
	}
</style>